<template>
	<view>
		<w-navbar type="normal" background="linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%)"><view slot="navbar-center">滚动通知</view></w-navbar>
		<pageDemoBlock title="基本用法" color="#1c87e4" :contentStyle="{ padding: '0' }">
			<w-noticeBar ref="noticeBar1" :content="content1" :playStatus="playStatus"></w-noticeBar>
		</pageDemoBlock>
		<pageDemoBlock title="自定义背景色/图标/速度/高度" color="#e42b2b" :contentStyle="{ padding: '0' }">
			<view class="m-b-2">
				<w-noticeBar
					ref="noticeBar2"
					leftIcon="icon-laba"
					:playStatus="playStatus"
					rightIcon="icon-115-lanmuguanli"
					:content="content2"
					background="#9d8cf1"
					color="#fff"
				></w-noticeBar>
			</view>
			<view class="m-b-2"><w-noticeBar :content="content3" :playStatus="playStatus" ref="noticeBar3" background="#f1b183" speed="20" color="#fff"></w-noticeBar></view>

			<view class="p-2"><w-button @click="playStop">播放/暂停</w-button></view>
		</pageDemoBlock>
	</view>
</template>

<script>
import pageDemoBlock from '@/components/page-demo-block';
export default {
	components: { pageDemoBlock },
	data() {
		return {
			playStatus: true,
			content1: '你眼里的星辰大海，是我从未见过的皓月明空。',
			content2: '星河滚烫你是人间理想，夜风寒凉你是人间火光。',
			content3: '我浑浑噩噩走过二十年，做过天上仙，受过万人谴，以为甘甜苦楚全都尝遍过，只有你回首一眼，才知这是人间。'
		};
	},
	methods: {
		playStop() {
			this.playStatus = !this.playStatus;
		}
	}
};
</script>

<style lang="scss" scoped></style>
